<template>
  <div class="d-flex py-3 px-2" style="align-items: center; width: 100%;">
    <!-- 站点总数 -->
    <DataItem :number="totalSites" label="站点总数" numberColor="#165DFF"/>
    <!-- 值班中 -->
    <DataItem :number="onDuty" label="值班中" numberColor="#00B42A" />
    <!-- 未值班 -->
    <DataItem :number="offDuty" label="未值班" numberColor="#FF7D00"/>
  </div>
</template>

<script>
import DataItem from "@/components/DataItem.vue";

export default {
  data() {
    return {
      totalSites: 100,
      onDuty: 95,
      offDuty: 5
    };
  },
  components: { DataItem },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>

</style>
